<template>
	<view class="page-content" :style="{'--main-color-1':configInfo.mainColor,'--main-color-2':configInfo.mainColor1}">
		<m-walletcard 
			:num="userInfo.money" 
			type="money"
			:rightBT="$t('recharge.walletcard-btn')"
			rightBP="/pages/withdrawal/withdrawal"
			v-if="userInfo"
		>
		</m-walletcard>
		<view class="conter">
			<view class="form-item">
				<view class="input-inline">
					<u--input
						type="digit"
						:placeholder="$util.handleStr($t('recharge.input-placeholder'),configInfo.money_company)"
						maxlength="9"
						v-model="rechargeMoney"
						clearable
						border="none"
						fontSize="25px"
						@change="changeMoney"
						class="number"
					>
					</u--input>
				</view>
			</view>
			<m-fixedmoney
				:list="fixedMoney"
				:company="configInfo.money_company"
				@clickFixedItem="clickFixedItem"
			>
			</m-fixedmoney>
			<view class="estimate-money">
				<view class="flex-start">
					{{$t('recharge.estimate-tips')}}<u--text type="error" mode="price" :text="estimateMoney" class="number"></u--text>
				</view>
			</view>
			<view class="m-t-md">
				<m-button shape="circle" :text="$t('recharge.btn')" :loading="loading" @submit="onRecharge"></m-button>
			</view>
		</view>
		<pay-method
			:show="payMethodShow"
			ref="payMethod"
			@close="payMethodShow = false"
			@action="submit"
		>
		</pay-method>
		
		<side-tools :scrollTop="scrollTop"></side-tools>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from "vuex"
	export default {
		data() {
			return {
				loading:false,
				rechargeMoney:'',
				estimateMoney:'0.00',
				fixedMoney:['10','20','30','50','100','200'],
				payMethodShow:false,
				onPayMode:1,
				scrollTop:0
			}
		},
		computed: mapState({
			userInfo: state => state.user.userInfo,
			configInfo: state => state.config.configInfo,
		}),
		async onLoad(option){
			this.initRecharge()
		},
		onReady(){
			if(this.$wechat.isWechat()) this.$util.navTitle()
		},
		onShow(){
			this.getUserInfo()
		},
		onUnload(){
			// 页面卸载 取消定时器
			clearInterval(this.timer);
			uni.hideLoading();
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		methods: {
			...mapActions(['getUserInfo']),
			initRecharge(){
				let prestes = this.configInfo.recharge_prestes
				if(prestes){
					this.fixedMoney = prestes.split(',');
				}
			},
			
			// 生成订单
			async submit(method){
				// this.payModePopup = false
				// this.loading = true;
				
				let data = {
					type : 1,
					recharge_num : this.rechargeMoney,
					method : method, // 选择的支付方式
				}
				console.log(data)
				let res = await this.$api.user.rechargeMoney(data)
				console.log(res)
				if(res.code == 200){
					let thos = this
					this.$util.showToast(res.msg,function(){
						if(method == 3){
							thos.payMethodShow = false
						}else{
							let orderNum = res.data.order_num
							thos.$refs.payMethod.action(orderNum);
						}
					})
					this.getUserInfo()
				}
				this.$refs.payMethod.loading = false
				
				
			},
			
			// 点击支付按钮
			onRecharge(){
				let rechargeMoney = parseInt(this.rechargeMoney);
				if(!rechargeMoney){
					this.$util.showToast(this.$t('recharge.money-none-tips'))
					return false
				}
				this.payMethodShow = true
			},

			changeMoney(value){
				// this.rechargeMoney = parseInt(this.rechargeMoney);
				// 计算需支付金额
				var money_proportion = this.configInfo.recharge_money_proportion; // 货币比例
				if(money_proportion){
					this.estimateMoney = value / money_proportion;
				}
			},
			

			async clickFixedItem(e){
				this.rechargeMoney = e.value;
				this.changeMoney(e.value);
			},
		}
	}
</script>

<style lang="scss">
	page{
		background-color: var(--theme-page-bg);
	}
	.m-walletcard{
		margin: 15px 30rpx;
	}
	.conter{
		padding: 5px 10px;
	}
	.form-item{
		margin:20px 0 10px;
		.title{
			font-size: 28rpx;
			// font-weight: bold;
		}
		.m-input{
			margin-top: 15px;
			padding: 5px 0;
			border-bottom: 1px solid #ccc;
		}12
		.u-input{
			// font-weight: bold;
		}
	}
	.estimate-money{
		color: $incolor-2;
		margin: 10px 0;
		font-size: $contentSize;
	}
	.m-btn{
		.x-btn{
			display: block;
			background-color: var(--main-color-1);
			color: $incolor-1;
		}
	}
	.m-with-type{
		margin: 1px 30rpx;
		padding: 15px 0;
		border-bottom: 1px solid #eee;
		.title{
			font-size: 28rpx;
			font-weight: bold;
		}
	}
	.fixed-money{
		
	}

</style>
